<template>
    <!-- 搜索工作栏 -->
    <div class='header'>
        <div class="search-tools">
            <SearchBar :searchConfig="searchConfig" 
                @transferSearchParams="transferSearchParams" 
                @search="handleSearch"
                @resetSearchParams="handleSearch"
                @resetSearch="resetSearch"
                ref="formParams" labelWidth="100px" labelPosition="right" style="margin: 0 0 15px 0">
                <el-button slot="inner" @click="handleAdd" size="small" type="primary">新建</el-button>
                <el-button slot="inner" @click="handleSort" size="small" type="primary" v-if="this.tableData.length > 0">排序</el-button>
            </SearchBar>
        </div>

        <Table ref="tableList"
            :tableConfig="newsColumntableConfig" 
            :tableData="tableData"
            :total="total"
            :pageNo="pageNo"
            :pageSize="pageSize"
            @sortChange="sortChange"
            @handleSelectionChange="handleSelectionChange"
            @handleChangePage="handleChangePage">
            <el-table-column align="center" label="操作" width="160">
                <template slot-scope="scope">
                    <div class="btn-box">
                        <span class="btns" @click="handleChangeStatus(scope.row, '0')" v-if="scope.row.status === '1'">不发布</span>
                        <span class="btns" @click="handleChangeStatus(scope.row, '1')" v-if="scope.row.status === '0'">发布</span>
                        <span class="btns" @click="handleEdit(scope.row)">编辑</span>
                        <span class="btns delete" @click="handleDelete(scope.row)">删除</span>
                    </div>
                </template>
            </el-table-column>
        </Table>
        <AddColumnPop ref="addColumnPop" @success="handleSearch" />
        <ViewNews ref="viewNews" />
        <DragSort ref="dragSort" @success="handleSearch" :TYPE="type" />
    </div>
</template>
<script>
import Sortable from "sortablejs";
import { formatDate } from '@/utils/index.js'
import { newsStudyTypeList, changeStatus, newsStudyTypeDelete } from '@/api/content-manage/researchResult.js';
import { TYPE, middleSearchConfig, newsColumntableConfig } from './initData';
import SearchBar from '@/views/components/SearchBar';
import Pagination from '@/views/components/Pagination'
import Table from "@/views/components/Table";
import AddColumnPop from './components/addColumnPop.vue';
import ViewNews from './components/viewNews.vue';
import BatchPush from './components/batchChangeColumn.vue';
import DragSort from './components/dragSort.vue';

export default {
    name: 'NewsList',
    components: {
        SearchBar,
        Table,
        AddColumnPop,
        ViewNews,
        BatchPush,
        Pagination,
        DragSort
    },
    data() {
        return {
            type: TYPE,
            searchConfig: middleSearchConfig,
            newsColumntableConfig,
            tableData: [],
            total: 100,
            pageNo: 0,
            pageSize: 10,
            tableSelectList: [],
            sortable: null,
            searchParams: {},
            sortingFields: null
        }
    },
    created() {
        this.getList();
    },
    mounted() {
        // this.dragSort();
    },
    methods: {
        async handleSort() {
            const { code, data } = await newsStudyTypeList({
                type: TYPE,
                pageNo: 1,
                pageSize: 999,
                status: '1'
            });
            if (code === 0) {
                this.$refs.dragSort && this.$refs.dragSort.open({
                    list: data.list
                });
            }
        },
        // 获取搜索框数据
        transferSearchParams(params) {
            this.searchParams = params;
        },
        async resetSearch () {
            this.searchParams = {};
            this.sortingFields = null;
            this.$refs.tableList && this.$refs.tableList.$children[0].clearSort();
            this.handleSearch();
        },
        handleSearch() {
            this.pageNo = 1;
            this.getList();
        },
        async getList() {
            const { code, data } = await newsStudyTypeList({
                ...this.searchParams,
                sortingFields: this.sortingFields,
                type: TYPE,
                pageNo: this.pageNo,
                pageSize: this.pageSize
            });
            if (code === 0) {
                this.tableData = data.list.map(v => {
                    return {
                        ...v,
                        createTimeStr: formatDate(v.createTime),
                        releaseTimeStr: formatDate(v.releaseTime), 
                        updateTimeStr: formatDate(v.updateTime),
                        statusName: v.status === '1' ? '已发布' : '未发布'
                    }
                });
                this.total = data.total;
            } else {
                this.tableData = [];
                this.total = [];
            }
        },
        handleSelectionChange(val) {
            this.tableSelectList = val;
        },
        handleChangePage({pageNo, pageSize}) {
            this.pageNo = pageNo;
            this.pageSize = pageSize;
            this.getList();
        },
        async handleChangeStatus(row, status) {
            const mark = status === '0' ? '不发布' : '发布'
            this.$confirm(`是否确认${mark}?`, '提示').then( async() => {
                const { code } = await changeStatus({
                    id: row.id,
                    status,
                    type: TYPE
                });
                if (code !== 0) return;
                this.$message.success('操作成功');
                this.handleSearch();
            });
        },
        handleEdit(row) {
            const data = JSON.stringify(row);
            this.$refs.addColumnPop && this.$refs.addColumnPop.open({popType: 'edit', row: data}); 
        },
        // 新建
        handleAdd() {
            this.$refs.addColumnPop && this.$refs.addColumnPop.open({popType: 'add'});
        },
        async handleDelete(row) {
            this.$confirm(`是否确认删除?`, '提示').then( async() => {
                const { code } = await newsStudyTypeDelete({
                    id: row.id,
                    type: TYPE
                });
                if (code !== 0) return;
                this.$message.success('删除成功');
                this.handleSearch();
            });
        },
        sortChange(sortingFields) {
            this.sortingFields = sortingFields;
            this.handleSearch();

        },
        // //表格拖动排序
        // dragSort() {
        //     const el = this.$refs.singleTable.$el.querySelectorAll(
        //         ".el-table__body-wrapper > table > tbody"
        //     )[0];
        //     this.sortable = Sortable.create(el, {
        //         ghostClass: "sortable-ghost",
        //         setData: function (dataTransfer) {
        //             dataTransfer.setData("Text", "");
        //         },
        //         onEnd: (e) => {
        //             console.log(e, '----拖动结果')
        //             const targetRow = this.tableData.splice(e.oldIndex, 1)[0];
        //             this.tableData.splice(e.newIndex, 0, targetRow);
        //             //这块根据自己需求处理
        //             let temp = [];
        //             this.tableData.map((m, i) => {
        //                 temp.push({
        //                     id: m.id,
        //                     seq: i,
        //                 });
        //             });
        //         },
        //     });
        // },
    }
}
</script>

<style lang='scss' scoped>
    .header {
        display: flex;
        flex-direction: column;
        padding: 0 20px;

        .search-tools {
            display: flex;
            justify-content: space-between;
        }

        .btn-box {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .btns {
                color: #02A7F0;
                cursor: pointer;
                display: inline-block;
                width: 33.33%
            }
            .delete {
                color: #f56c6c;
            }
        }
    }
</style>